<template>
  <div id="app">
    <div id="nav">
      <dynamic-form ref="form" v-model="formData" :model="formModel" />
    </div>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>
<script>
import DynamicForm from '@/components/dynamic-form'
export default {
  components: {
    DynamicForm
  },
  data () {
    return {
      formData: {},
      formModel: {
        fields: [
          {
            type: 'group',
            name: '2222'
          },
          {
            code: 'code', // 字段编码
            name: '编码', // 字段名称
            type: 'string', // 使用的控件类型
            default: '', // 默认值
            span: 2, // 当表单为inline模式时当前字段控件占用的列数
            rules: [ // 校验规则 type(range\phone\email) pattern(正则表达式\正则表达式 字符串)
              { required: true, message: '请输入编码', trigger: 'blur' },
              { type: 'range', max: 10, min: 5, message: '编码长度应该大于5小于10' },
              { type: 'phone', message: '请输入正确电话号码' },
              { pattern: '/^1[3456789]\\d{9}$/', message: '请输入正确电话号sds码s' }
            ],
            attrs: { // iview中存在的控件属性参考iview对应控件属性设置
              placeholder: '请输入编码'// disabled: true
            }
          },
          {
            code: 'amount',
            name: '金额',
            type: 'number',
            rules: [
              { required: true, message: '请输入金额', trigger: 'blur' }
            ]
          },
          { // arrStruct 字段为对象数组[{},{}]
            // 1.当数组中每一项对象字段相同时children为对象类型只需要一个fields描述即可，当数组的值为string或number时fields中只包含一个控件的描述并且不要code值['1','2']
            // 2.当每一项对象包含字段不同时children为数组类型数组的每一项都有一个fields各自描述自己的字段组成[{fields:[]},{fields:[]}]
            code: 'arrStruct',
            name: 'arr分组',
            type: 'arrStruct',
            attrs: { labelPosition: 'right', labelWidth: '80' },
            children: {
              fields: [
                {
                  code: 'group1',
                  name: 'group1',
                  type: 'string',
                  attrs: { placeholder: '请输入group1' }
                },
                {
                  code: 'group2',
                  name: 'group22',
                  type: 'number',
                  rules: [
                    { required: true, message: '请输入group2', trigger: 'blur' }
                  ]
                }
              ]
            }
          },
          { // objStruct或form 字段为对象{a:'',b:''}
            code: 'objStruct',
            name: 'obj分组',
            type: 'objStruct', // objStruct 或 form
            attrs: { labelPosition: 'right', labelWidth: '80' },
            children: {
              fields: [
                {
                  code: 'group1',
                  name: 'group1',
                  type: 'string',
                  attrs: { placeholder: '请输入group1' }
                },
                {
                  code: 'group2',
                  name: 'group22',
                  type: 'number',
                  rules: [
                    { required: true, message: '请输入group2', trigger: 'blur' }
                  ]
                }
              ]
            }
          },
          {
            code: 'progress',
            name: '进度',
            type: 'percent',
            rules: [
              { required: true, message: '请选择进度' }
            ]
          },
          {
            code: 'area',
            name: '地区',
            type: 'select',
            attrs: { placeholder: '请选择地区' },
            dataList: [
              { value: '北京', name: '北京' },
              { value: '南京', name: '南京' }
            ],
            rules: [
              { required: true, message: '请选择地区', trigger: 'change' }
            ]
          },
          {
            code: 'des',
            name: '说明',
            type: 'text',
            attrs: { placeholder: '请输入说明' },
            rules: [
              { required: true, message: '请输入说明', trigger: 'blur' }
            ]
          },
          {
            code: 'citys',
            name: '城市',
            type: 'selectMulti',
            required: true,
            dataList: [
              { value: '北京', name: '北京' },
              { value: '南京', name: '南京' }
            ],
            rules: [
              { required: true, message: '请选择城市', trigger: 'change' }
            ]
          },
          {
            code: 'good',
            name: '宜居',
            type: 'radioGroup',
            dataList: [
              { value: 1, name: '是' },
              { value: 2, name: '否' }
            ],
            attrs: { type: 'button' },
            rules: [
              { required: true, message: '请选择' }
            ]
          },
          {
            code: 'accept',
            name: '接受',
            type: 'checkbox'
          },
          {
            code: 'applyType',
            name: '申请类型',
            type: 'checkList',
            dataList: [{
              name: '疾病',
              value: '疾病'
            },
            {
              name: '意外',
              value: '意外'
            }
            ]
          },
          {
            code: 'isOpen',
            name: '是否打开',
            type: 'switch',
            rules: [
              { required: true, message: '请选择进度' }
            ]
          },
          {
            code: 'date',
            name: '日期',
            type: 'date',
            attrs: { placeholder: '请' }
          },
          {
            code: 'time',
            name: '时间',
            type: 'time',
            attrs: { type: 'timerange', placeholder: '请' }
          },
          {
            code: 'selectSteps',
            name: '联动',
            type: 'selectStep',
            attrs: { placeholder: '请' },
            dataList: [{
              value: 'beijing',
              label: '北京',
              children: [
                {
                  value: 'gugong',
                  label: '故宫'
                },
                {
                  value: 'tiantan',
                  label: '天坛'
                },
                {
                  value: 'wangfujing',
                  label: '王府井'
                }
              ]
            }]
          },
          // {
          //   code: 'objCode',
          //   name: '对象',
          //   type: 'codeEditor',
          //   rules: [
          //     /**
          //      * 自定义的validator包含参数
          //      * formData:此表单所有字段数据、vm:当前control组件实例、value:当前字段值、
          //      * rule:本条校验规则对象、callback:回调函数
          //      * callback(new Error('错误信息'))
          //      */
          //     {
          //       validator: ({ formData, vm, value, rule, callback }) => {
          //         vm.onError ? callback(new Error('json格式不正确')) : callback()
          //       }
          //     }
          //   ]
          // },
          {
            code: 'url',
            name: '数据源地址',
            type: 'stringList',
            splitter: ',', // 分割符默认逗号
            attrs: { placeholder: '请输入数据源地址多个以逗号隔开' }
          },
          {
            code: 'keyValue',
            name: '键值对',
            type: 'keyValue'
          },
          {
            code: 'list',
            name: '列表',
            span: 2,
            type: 'list',
            height: 200, // 列表高度超出产生滚动条默认300
            fields: [ // 当fields中字段disabled不为true时渲染控件反之直接展示数据
              {
                code: 'name',
                name: 'name',
                type: 'string'
              },
              {
                code: 'accept',
                name: '接受',
                type: 'checkbox'
              },
              {
                code: 'date',
                name: '日期',
                type: 'date',
                attrs: { placeholder: '请' }
              },
              {
                code: 'progress',
                name: '进度',
                type: 'percent'
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    handler (v) {
      console.log(v)
    },
    submit () {
      console.log(this.$refs.form)
      this.$refs.form.validate()
        .then(() => {
          console.log(this.formData)
        })
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
